<template>
  <div class="cockpit">
    <div class="select-wrap">
      <b>驾驶舱选择：</b>
      <el-select size="medium" @change="queryCateSubItem" v-model="selectCockpitCode" placeholder="请选择驾驶舱" style="margin-right: 12px">
        <el-option v-for="(cockpit,index) in cockpitList" :key="index" :label="cockpit.dashboardName" :value="cockpit.dashboardCode"></el-option>
      </el-select>
      <!-- 诊改办没有二级选项 -->
      <el-select v-if="this.selectCockpitCode !== 'zlzx'" size="medium" v-model="selectCockpitSubItemCode" placeholder="请选择驾驶舱" style="margin-right: 12px">
        <el-option v-show="cockpitSubItem.dashboardDetailCode" v-for="(cockpitSubItem,index) in cockpitSubItemList" :key="index" :label="cockpitSubItem.dashboardDetailName" :value="cockpitSubItem.dashboardDetailCode"></el-option>
      </el-select>
    </div>

    <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:100%;margin-top: 20px;" id="iframeBox"></iframe>
    <!-- <iframe src="http://10.1.5.244:50401/analysis/dashboard/show/af861f91f180bffa8601/?org=390" frameborder="0" style="width:100%;height:100%;margin-top: 20px;" id="iframeBox"></iframe> -->
  </div>
</template>

<script>
import bus from '@/config/bus.js'
import { queryCate, queryCateSubItem } from '@/api/cockpit.js'
import { getUserAllRoles } from '@/api/systemManage.js'
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        // 类别选择
        category: '',
        // 层面选择
        level: '',
        // 列表选择
        list: ''
      },
      rules: {
        category: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        level: [{ required: true, message: '请选择层面', trigger: 'blur' }],
        list: [{ required: true, message: '请选择列表', trigger: 'blur' }]
      },
      // 登录人Id
      userId: '',
      // 登录人信息
      userInfo: {},
      // 驾驶舱切换角色
      cockpitList: [],
      // 当前选择的驾驶舱Code
      selectCockpitCode: '',
      // 驾驶舱二级选项
      cockpitSubItemList: [],
      // 当前选择的二级驾驶舱
      selectCockpitSubItemCode: ''
    }
  },
  computed: {
    // 驾驶舱图表显示路径
    iframeSrc() {
      if (this.selectCockpitCode === 'bzr') {
        return 'http://10.1.5.244:50401/analysis/dashboard/show/af861f91f180bffa8601/?org=390&dashboardDetailCode=' + this.selectCockpitSubItemCode
      }
      if (this.selectCockpitCode === 'jys') {
        return 'http://10.1.5.244:50401/analysis/dashboard/show/2874ce3261802ac45451/?org=123&dashboardDetailCode=' + this.selectCockpitSubItemCode
      }
      return ''
    }
  },
  created() {
    // 获取当前登录人信息
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    // 获取登录人拥有的驾驶舱
    this.getQueryCate()
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$refs.ruleForm.resetFields()
    },
    submitDownload() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          setTimeout(() => {
            this.$message.success('数据导出成功！')
            this.dialogVisible = false
          }, 800)
        } else {
          this.$message('请选择导出数据！')
        }
      })
    },
    /*    // 获取当前用户所有角色
    getUserAllRoles(id) {
      getUserAllRoles({ userId: id }).then(res => {
        res.forEach(item => {
          switch (item.roleId) {
            case 22:
              item.name = '诊改办驾驶舱'
              this.userCockpitRoleList.push(item)
              break
            case 23:
              item.name = '诊改层面驾驶舱（专业层）'
              this.userCockpitRoleList.push(item)
              break
            case 24:
              item.name = '诊改层面驾驶舱（课程层）'
              this.userCockpitRoleList.push(item)
              break
            case 25:
              item.name = '诊改层面驾驶舱（教师层）'
              this.userCockpitRoleList.push(item)
              break
            case 26:
              item.name = '诊改层面驾驶舱（学生层）'
              this.userCockpitRoleList.push(item)
              break
            case 27:
              item.name = '诊改层面驾驶舱（学校层）'
              this.userCockpitRoleList.push(item)
              break
            case 28:
              item.name = '教学单位驾驶舱(' + this.userInfo.orgName + ')'
              this.userCockpitRoleList.push(item)
              break
          }
        })
        if (this.userCockpitRoleList.length) {
          this.selectRoleId = this.userCockpitRoleList[0].roleId
          this.handleCommand()
        }
      })
    },
    // 切换角色
    handleCommand() {
      switch (this.selectRoleId) {
        case 22:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/7ece1e87b17fdd57e94e/'
          break
        case 23:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=XT_WH_ZY'
          break
        case 24:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=XT_WH_KC'
          break
        case 25:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=XT_WH_JS'
          break
        case 26:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=XT_WH_XS'
          break
        case 27:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=XT_WH_XX'
          break
        case 28:
          this.iframeSrc = 'http://10.1.5.244:50401/analysis/dashboard/show/1df15929b1802ac3997f/?xy=' + this.userInfo.orgId
          break
      }
    }, */
    // 获取登录人拥有的驾驶舱
    getQueryCate() {
      queryCate({
        userId: this.userInfo.id
      }).then(res => {
        // console.log(res)
        this.cockpitList = res
        if (this.cockpitList.length) {
          this.selectCockpitCode = this.cockpitList[0].dashboardCode
          // 获取当前驾驶舱下的二级选项
          this.queryCateSubItem()
        }
      })
    },
    // 获取驾驶舱下的二级选项
    queryCateSubItem() {
      queryCateSubItem({
        userId: this.userInfo.id,
        dashboardCode: this.selectCockpitCode
      }).then(res => {
        // console.log(res)
        // 诊改办驾驶舱 没有二级选项
        this.cockpitSubItemList = res
        bus.$emit('downloadDate', res)
        if (this.cockpitSubItemList.length) {
          const selectItem = this.cockpitSubItemList.find(item => {
            return item.dashboardDetailCode != null
          })
          if (selectItem) {
            this.selectCockpitSubItemCode = selectItem.dashboardDetailCode
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.cockpit {
  width: 100%;
  height: 100%;
}
.select-wrap {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}
</style>

<style scoped>
.cockpit /deep/ .el-input--medium .el-input__inner {
  width: 280px;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  color: #606266;
}
.cockpit /deep/ .el-select .el-input .el-select__caret {
  font-size: 16px;
}
</style>
